import React, {Component} from 'react'
import {Link, withRouter} from 'react-router-dom'
import {Menu, Icon} from 'antd'

import logo from '../../assets/images/logo.png'
import menuList from '../../config/menu_config'
import memoryUtils from '../../utils/memory_utils'
import './LeftNav.less'

const {SubMenu} = Menu

// 左侧导航组件
class LeftNav extends Component {
  // 判断当前登录用户对item是否有权限
  hasAuth = (item) => {
    const { key, isPublic } = item

    const menus = memoryUtils.user.role.menus
    const username = memoryUtils.user.username
    /*
    * 1. 如果当前用户是 admin
    * 2. 如果当前 item 是公开的
    * 3. 当前用户有此 item 的权限: key有没有在menus中
    * */
    if (username === 'admin' || isPublic || menus.includes(key)) {
      return true
    } else if (item.children) { // 4. 如果当前用户有此 item 的某个子item的权限
      return !!item.children.find(child => menus.includes(child.key))
    }

    return false
  }

  /*
   * 根据 menu 的数据数组来生成对应的标签数组
   * 使用 reduce() + 递归调用
   * */
  getMenuNodes = (menuList) => {
    // 得到当前请求的路由路径
    const { pathname } = this.props.location

    return menuList.reduce((pre, item) => {
      // 如果当前用户有 item 对应的权限, 才需要显示对应的菜单项
      if (this.hasAuth(item)) {
        // 向 pre中push  Menu.Item
        if (!item.children) {
          pre.push(
            <Menu.Item key={item.key}>
              <Link to={item.key}>
                <Icon type={item.icon}/>
                <span>{item.title}</span>
              </Link>
            </Menu.Item>
          )
        } else {
          // 查找一个与当前请求路径匹配的子 Item
          const cItem = item.children.find(cItem => pathname.includes(cItem.key))
          // 如果存在, 说明当前 item 的子列表需要打开
          if (cItem) {
            this.openKey = item.key
          }

          // 向 pre中push SubMenu
          pre.push(
            <SubMenu
              key={item.key}
              title={
                <span>
                <Icon type={item.icon}/>
                <span>{item.title}</span>
              </span>
              }
            >
              {this.getMenuNodes(item.children)}
            </SubMenu>
          )
        }
      }
      return pre
    }, [])
  }

  /*
  * 在第一次 render() 之前执行一次
  * */
  UNSAFE_componentWillMount() {
    this.munuNodes = this.getMenuNodes(menuList)
  }

  render() {
    // debugger
    // 得到当前请求的路由路径
    let { pathname } = this.props.location

    if (pathname.includes('/product')) {
      pathname = '/product'
    }

    // console.log('render()', pathname)
    // 得到需要打开菜单项的 key
    const openKey = this.openKey

    return (
      <div className='left-nav'>
        <Link to='/' className='left-nav-header'>
          <img src={logo} alt="谷粒后台"/>
          <h1>谷粒后台</h1>
        </Link>
        <Menu
          theme='dark'
          mode="inline"
          selectedKeys={[pathname]}
          defaultOpenKeys={[openKey]}
        >
          {
            this.munuNodes
          }
        </Menu>
      </div>
    )
  }
}

/*
* withRouter高阶组件
* 包装非路由组件, 返回新组件
* */
export default withRouter(LeftNav)
